<template>
  <div style="padding-left: 20px;text-align: left">
    <el-row style="text-align: right;padding: 10px">
      <el-button icon="el-icon-search" size="mini" @click="searchFlagChange" />
    </el-row>
    <el-form
      v-if="searchFlag"
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="small"
      label-width="100px"
      label-position="left"
      :inline="true"
      style="padding: 10px"
    >

      <el-form-item label="请求内容" prop="resuestBody">
        <el-input
          v-model="formData.resuestBody"
          placeholder="请输入请求内容"
          clearable
          style="width: 150px"
          @keyup.enter.native="getPageData"
        />
      </el-form-item>
      <el-form-item label="请求ip" prop="ip">
        <el-input
          v-model="formData.ip"
          placeholder="请输入请求ip"
          clearable
          style="width: 150px"
          @keyup.enter.native="getPageData"
        />
      </el-form-item>
      <el-form-item label="请求用户" prop="requestUser">
        <el-input
          v-model="formData.requestUser"
          placeholder="请输入请求用户名"
          clearable
          style="width: 150px"
          @keyup.enter.native="getPageData"
        />
      </el-form-item>
      <el-form-item label="返回内容" prop="responseBody">
        <el-input
          v-model="formData.responseBody"
          placeholder="请输入返回内容"
          clearable
          style="width: 150px"
          @keyup.enter.native="getPageData"
        />
      </el-form-item>
      <el-form-item label="级别" prop="level">
        <el-select v-model="formData.level" placeholder="请选择" clearable>
          <el-option
            v-for="item in levelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" prop="time">
        <el-date-picker
          v-model="formData.time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 350px"
        />
      </el-form-item>
      <el-form-item>
        <BeeButton :loading="loading" code="logSearch" type="primary" @click="getPageData('search')">查询</BeeButton>
      </el-form-item>

    </el-form>

    <el-row>
      <el-col :span="24">
        <div v-if="tableData.length!==0">
          <el-table
            v-loading="loading"
            :size="isMobile()?'mini':'medium'"
            :data="tableData"
            style="width: 100%"
            border
            tooltip-effect="light"
            @sort-change="handleSortChange"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-card>
                  <div slot="header" class="clearfix">
                    <span>详细信息</span>
                  </div>
                  <el-form label-position="left" inline class="table-expand">
                    <el-form-item label="来源ip">
                      <span>{{ props.row.ip }}</span>
                    </el-form-item>
                    <el-form-item label="请求用户">
                      <span>{{ props.row.requestUser }}</span>
                    </el-form-item>
                    <el-form-item label="请求url">
                      <span>{{ props.row.requestUrl }}</span>
                    </el-form-item>
                    <el-form-item label="方法路径">
                      <span>{{ props.row.method }}</span>
                    </el-form-item>
                    <el-form-item label="级别">
                      <span>{{ props.row.level }}</span>
                    </el-form-item>
                    <el-form-item label="请求方式">
                      <span>{{ props.row.requestMethod }}</span>
                    </el-form-item>
                    <el-form-item label="执行时间">
                      <span>{{ props.row.startTime }}</span>
                    </el-form-item>
                    <el-form-item label="耗时">
                      <span>{{ props.row.useTime }}</span>
                    </el-form-item>
                    <el-form-item label="请求内容">
                      <json-viewer
                        style="min-width: 500px"
                        :value="JSON.parse(props.row.requestBody)"
                        boxed
                        :expand-depth="5"
                      />
                    </el-form-item>
                    <el-form-item :label="props.row.level==='info'?'返回内容':'错误日志'">
                      <json-viewer
                        v-if="props.row.level==='info'"
                        style="min-width: 500px"
                        :value="JSON.parse(props.row.responseBody)"
                        boxed
                        :expand-depth="5"
                      />
                      <el-card
                        v-else
                        shadow="hover"
                        style="min-width: 500px;max-height:500px;overflow:auto;word-break: break-all"
                      >
                        {{ props.row.errorMsg }}
                      </el-card>
                    </el-form-item>
                  </el-form>
                </el-card>
              </template>
            </el-table-column>
            <el-table-column
              prop="requestUrl"
              label="请求url"
              show-overflow-tooltip
            />
            <el-table-column
              prop="requestUser"
              label="请求用户"
              width="100px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="method"
              label="方法路径"
              show-overflow-tooltip
            />
            <el-table-column
              prop="requestMethod"
              label="请求方法"
              width="100px"
            />
            <el-table-column
              prop="level"
              label="级别"
              width="100px"
            />
            <el-table-column
              prop="useTime"
              label="耗时"
              width="100px"
            />
            <el-table-column
              prop="startTime"
              label="执行开始时间"
              width="200px"
              sortable
              show-overflow-tooltip
            />
          </el-table>
          <el-pagination
            :page-size="size"
            :current-page="current"
            layout="total,sizes, prev, pager, next,jumper"
            :total="total"
            :page-sizes="[ 5, 10, 50, 100]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <el-empty v-else description="查询结果为空" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import BeeButton from '@/components/RoleButton/index.vue'
import { formatData, paramNoNull } from '@/utils/ParamFilter'
import { page } from '@/api/logs'
import { timestampToTime } from '@/utils/timeUtils'
import { isMobile } from '@/utils/ObjectUtil'

export default {
  name: 'Logs',
  components: { BeeButton },
  props: [],
  data() {
    return {
      loading: false,
      orderAsc: false,
      orderColumn: 'startTime',
      tableData: [],
      current: 0,
      size: 10,
      total: 0,
      searchFlag: !isMobile(),
      formData: {
        requestBody: undefined,
        responseBody: undefined,
        level: undefined,
        ip: undefined,
        requestUser: undefined,
        time: [timestampToTime(new Date(new Date().setHours(0, 0, 0, 0))),
          timestampToTime(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)]
      },
      levelOptions: [{
        label: 'info',
        value: 'info'
      }, {
        label: 'error',
        value: 'error'
      }],
      rules: {
        time: [{ required: true, message: '时间范围必选', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getPageData()
  },
  methods: {
    paramNoNull,
    isMobile,
    searchFlagChange() {
      this.searchFlag = !this.searchFlag
    },
    getPageData(type) {
      if (this.formData.time === null) {
        this.formData.time = ''
      }
      if (type === 'search') {
        this.current = 1
      }
      const data = {
        current: this.current,
        size: this.size,
        requestBody: this.formData.resuestBody,
        responseBody: this.formData.responseBody,
        level: this.formData.level,
        ip: this.formData.ip,
        requestUser: this.formData.requestUser,
        orderColumn: this.orderColumn,
        orderAsc: this.orderAsc,
        startTime: this.formData.time !== '' ? this.formData.time[0] : '',
        endTime: this.formData.time !== '' ? this.formData.time[1] : ''
      }
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.loading = true
        page(data).then(res => {
          this.tableData = formatData(res.data.logs)
          this.total = res.data.count
        }).catch(err => {
          console.log(err)
        }).finally(() => {
          this.loading = false
        })
      })
    },
    handleSizeChange(size) {
      this.size = size
      this.getPageData()
    },
    handleCurrentChange(current) {
      this.current = current
      this.getPageData()
    },
    handleSortChange(column) {
      this.orderColumn = column.prop
      if (column.order === 'ascending') {
        this.orderAsc = true
      } else if (column.order === 'descending') {
        this.orderAsc = false
      } else {
        this.orderColumn = ''
        this.orderAsc = ''
      }
      this.getPageData('search')
    }
  }
}

</script>
<style>
.table-expand {
  font-size: 0;
}

.table-expand label {
  width: 90px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
